<template>
  <div>
    <div id="doughnut" ref="doughnut" style="height:400px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Doughnut',
  props: {
    chartData: Array
  },
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  watch: {
    chartData: {
      handler (newVal, oldVal) {
        this.initChart()
      },
      deep: true
    }
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.doughnut)
      const colorList = ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', 'rgba(250,250,250,0.5)']

      const option = {
        backgroundColor: 'rgb(12,16,61)',
        // title: {
        //   text: this.chartData.name,
        //   top: '16',
        //   left: '16',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '14'
        //   }
        // },
        grid: {
          bottom: 150,
          left: 0,
          right: '10%'
        },
        legend: {
          show: false,
          orient: 'vertical',
          top: 'middle',
          right: '5%',
          textStyle: {
            color: '#f2f2f2',
            fontSize: 25
          },
          icon: 'roundRect'
        },
        series: [
          // 主要展示层的
          {
            radius: ['15%', '51%'],
            center: ['50%', '50%'],
            type: 'pie',
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                // length: 15,
                // length2: 50,
                lineStyle: {
                  color: '#fff'
                },
                align: 'right'
              },
              color: '#000',
              emphasis: {
                show: true
              }
            },
            label: {
              normal: {
                formatter: function (params) {
                  var str = params.name + params.value
                  return str.length < params.name.length
                    ? str
                    : `${str.slice(0, params.name.length)}\n${str.slice(params.name.length)}`
                }
              }
            },
            data: [...this.chartData]
          },
          // 边框的设置
          {
            radius: ['47%', '51%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: 'rgba(250,250,250,0.5)'
              }
            },
            data: [
              {
                value: 1
              }
            ]
          }
        ]
      }
      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
